<template>
    <div id="addPicturePage">
        <h2 style="margin-bottom: 16px">
            {{ route.query?.id ? '修改图片' : '创建图片' }}
        </h2>
        <!-- 图片上传组件 -->
        <!-- 选择上传方式 -->
        <a-tabs v-model:activeKey="uploadType">
            <a-tab-pane key="file" tab="文件上传">
                <PictureUpload :picture="picture" :onSuccess="onSuccess" />
            </a-tab-pane>
            <a-tab-pane key="url" tab="URL 上传" force-render>
                <UrlPictureUpload :picture="picture" :onSuccess="onSuccess" />
            </a-tab-pane>
        </a-tabs>
        <!-- 图片上传表单 -->
        <a-form v-if="picture" layout="vertical" :model="pictureForm" @finish="handleSubmit">
            <a-form-item label="名称" name="name">
                <a-input v-model:value="pictureForm.name" placeholder="请输入名称" />
            </a-form-item>
            <a-form-item label="简介" name="introduction">
                <a-textarea v-model:value="pictureForm.introduction" placeholder="请输入简介" :rows="2"
                            :autoSize="{minRows: 2, maxRows: 5}" allowClear/>
            </a-form-item>
            <a-form-item label="分类" name="category">
                <a-auto-complete v-model:value="pictureForm.category" :options="categoryOptions" placeholder="请输入分类"
                    allowClear/>
            </a-form-item>
            <a-form-item label="标签" name="tags">
                <a-select v-model:value="pictureForm.tags" :options="tagOptions" mode="tags" placeholder="请输入标签"
                        allowClear/>
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" style="width: 100%">创建</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script lang="ts" setup>
import PictureUpload from '../../components/PictureUpload.vue';
import UrlPictureUpload from '../../components/UrlPictureUpload.vue';
import {onMounted, reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {
    editPictureUsingPost,
    getPictureVoByIdUsingGet,
    listPictureTagCategoryUsingGet
} from "../../api/pictureController";
import {message} from "ant-design-vue";

// 图片上传的属性
const picture = ref<API.PictureVO>();
// 表单上传信息
const pictureForm = reactive<API.PictureEditRequest>({});
const onSuccess = (newPicture: API.PictureVO) => {

    picture.value = newPicture;
    pictureForm.name = newPicture.name;
};
const uploadType = ref<'file' | 'url'>('file');


// 提交表单的方法
const router = useRouter();

/**
 * 提交表单
 * @param values
 */
const handleSubmit = async (values: any) => {

    const pictureId = picture.value.id;
    if (!pictureId) {

        return
    }
    const res = await editPictureUsingPost({

        id: pictureId,
        ...values,
    })
    if (res.data.code === 0 && res.data.data) {

        message.success('创建成功')
        // 跳转到图片详情页
        router.push({

            path: `/picture/${pictureId}`,
        })
    } else {

        message.error('创建失败，' + res.data.message)
    }
};

// 获取标签和分类选项
const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])
const getTagCategoryOptions = async () => {

    const res = await listPictureTagCategoryUsingGet()
    if (res.data.code === 0 && res.data.data) {

        // 转换成下拉选项组件接受的格式
        tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => {

            return {

                value: data,
                label: data,
            }
        })
        categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => {
            return {
                value: data,
                label: data,
            }
        })
    } else {

        message.error('加载选项失败，' + res.data.message)
    }
};

onMounted(() => {

    getTagCategoryOptions()
});

// 获取老数据
const route = useRoute()

// 获取老数据
const getOldPicture = async () => {

    // 获取数据
    const id = route.query?.id
    if (id) {

        const res = await getPictureVoByIdUsingGet({ id: id });
        if (res.data.code === 0 && res.data.data) {

            const data = res.data.data
            picture.value = data
            pictureForm.name = data.name
            pictureForm.introduction = data.introduction
            pictureForm.category = data.category
            pictureForm.tags = data.tags
        }
    }
}
onMounted(() => {
    getOldPicture()
})
</script>

<style scoped>
#addPicturePage {

    max-width: 720px;
    margin: 0 auto;
}
</style>
